<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        .title{
            line-height: 40px;
            font-weight: bold;
            text-align: center;
        }
        .list .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
        }
        .list  .item img{
            width: 60px;
        }
        .name{
            font-size: 20px;
        }
        .empty{
            text-align: center;
            margin: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-show特点是控制元素显示或隐藏，本质是v-show所在的元素一定会渲染，元素的显示隐藏 是通过style样式中的display属性来控制 -->
        <!-- v-if控制元素显示隐藏，v-if是条件成立时渲染，条件不成立不渲染，是通过是否渲染该元素来控制 -->

        <!-- 如果一个元素的显示隐藏比较频繁，建议使用v-show，内存开销小 -->
        <!-- v-if和v-for不能在同一个标签显示，v-if的优先级高于v-for -->
        <div class="title">任务列表</div>
        <div class="list">
            <!-- <div class="item" v-for="(item,index) in tasklist"v-bind:key="index"> -->
            <div class="item" v-for="(item,index) in tasklist":key="index">
                <div class="left">
                    <!-- <img v-bind:src="item.pic " alt="" srcset=""> -->
                    <img :src="item.pic " alt="" srcset="">
                </div>
                <div class="middle">
                    <div class="name">{{item.name}}</div>
                    <div class="desc">{{item.desc}}</div>
                </div>
                <div class="right">
                    <!-- <button v-on:click="changeStatus(item)">{{item.status==1?'去完成':item.status==2?'领取':'已领取' }}</button> -->
                    <button @:click="changeStatus(item)">{{item.status==1?'去完成':item.status==2?'领取':'已领取' }}</button>
                </div>
            </div>
            <!-- <div class="empty" v-show="tasklist.length==0">任务列表为空</div> -->
            <div class="empty" v-if="tasklist.length==0">任务列表为空</div>
        </div>
    </div>
    
</body>
<script src="./vue-2.5.21.js"></script>
</html>
<script>
    var v=new Vue({
        el:'#app',
        data:{
            tasklist:[
                {id:1, pic:'./02.webp', name:'咪咕视频送流量',desc:'每月领500浏览',status:1},
                {id:2,pic:'./02.webp', name:'咪咕视频送福利',desc:'每月领800浏览',status:2},
                {id:3,pic:'./02.webp',name:'咪咕视频送套餐折扣券',desc:'每月领1500浏览',status:3},
                {id:4,pic:'./02.webp',name:'咪咕视频送超级秒杀',desc:'每月领5500浏览',status:1},
            ]
        },
        methods:{
            //定义方法
            changeStatus(item){
                // console.log('更改任务状态');
                if(item.status==1){
                    item.status=2
                }else if(item.status==2){
                    item.status=3
                }
            }
        }
        
    })


</script>